<template>
    <div class="bind-phone-background">
        <van-row type="flex" justify="space-around">
            <van-col span="24" class='bind-phone-title'>
                 验证手机号                 
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">               
                <van-field class='bind-phone-field' type='tel' v-model="saveData.phoneNo" placeholder="请输入您的手机号" clearable @change.native='checkPhone()'/>
                <span class="bind-phone-errMsg">{{err.phoneNo}}</span>
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
        	<van-field v-model="saveData.authCode" class='bind-phone-field' center clearable  placeholder="请输入短信验证码" @change.native='checkNumber()'>
    		<van-button slot="button" size="small" type="primary" :disabled='!sandCode.sand' clearable @click.native='sendCode()'>{{sandCode.msg}}</van-button>
  			</van-field>
  			 <span class="bind-phone-errMsg">{{err.authCode}}</span>
            </van-col>           
        </van-row>
         <van-row type="flex" justify="space-around">
         	<!--  -->
            <van-col span="24"><van-button :disabled='!cansave' class='bind-phone-submit'  type="default" @click.native='save()'>确认</van-button></van-col>
        </van-row>
         <van-row >
            <van-col span="12" style='text-align: left; padding: 20px;' :style='{color:alreadySaved?"#30AFF7":"#b2b2b2" }'>
            	<span  @click='goBack()'><i class="fa fa-long-arrow-left"></i>&#12288;&#12288;返&#12288;回</span>            
            </van-col>
           <!--  <van-col span="12"  style='text-align: right; padding: 20px;' :style='{color:alreadySaved?"#30AFF7":"#b2b2b2" }'>
            	<span @click='vehMgt()'>管理车辆&#12288;<i class="fa fa-long-arrow-right"></i> </span>            
            </van-col> -->
        </van-row>       
    </div>
</template>
<script>
import { Toast } from 'vant';
import { UserService, GuidanceService } from './api';
export default {
    name: 'bindPhone',
    data() {
        return {
            cansave: false,
            alreadySaved: false,
            saveData: {
                phoneNo: '',
                authCode: '',
                openid: ''
            },
            sandCode: {
                msg: '发送验证码',
                time: 10,
                sand: false
            },
            err: {
                phoneNo: '',
                authCode: ''
            }
        };
    },
    created() {
        this.saveData.openid = this.$route.query.openid;
        if (!this.saveData.openid) {
            GuidanceService.getOpenId(this.$route.query.code).then((res1) => {
                this.saveData.openid = res1;
            }, (err) => {
                return;
            });
        }      
    },
    methods: {
        checkPhone() {
            this.sandCode.sand = false;
            if (!this.saveData.phoneNo) {
                this.err.phoneNo = '* 请输入您的手机号';
                return false;
            }
            let reg = /^[1][0-9]{10}$/;
            if (!reg.test(this.saveData.phoneNo)) {
                this.err.phoneNo = '* 请输入正确的手机号';
                return false;
            } else {
                this.err.phoneNo = '';
                this.sandCode.sand = true;
                return true;
            }
        },
        checkNumber() {
            if (!this.saveData.authCode) {
                this.err.authCode = '* 请输入验证码';
                return false;
            }
            let reg = /^[0-9]{6}$/;
            if (!reg.test(this.saveData.authCode)) {
                this.err.authCode = '* 请输入正确的验证码';
                return false;
            } else {
                this.err.authCode = '';
                return true;
            }
        },

        sendCode() {
            UserService.sendAuthCode(this.saveData.phoneNo).then((res) => {
                // ${this.saveData.phoneNo},
                Toast.success(`验证码已发送至您的手机（有效期${res/60}分钟),请及时输入`);
                let djs = setInterval(() => {
                    this.sandCode.time--;
                    this.sandCode.msg = `${this.sandCode.time}秒后可重试`
                    this.sandCode.sand = false;
                    if (this.sandCode.time == 0) {
                        clearInterval(djs);
                        this.sandCode.time = 10;
                        this.sandCode.msg = '发送验证码';
                        this.checkPhone();
                    }
                }, 1000)
            }, (err) => {
                this.checkPhone();
                Toast.fail('验证码发送失败,请重试');
            });
        },

        save() {
            UserService.LinkPhoneNo(this.saveData).then((res) => {
                Toast.success('手机绑定成功');
                this.cansave = false;
                this.alreadySaved = true;
            }, (err) => {
                Toast.fail('手机绑定失败');
            });
        },
        goBack() {
            // if( this.alreadySaved){
            let backUrl = { name: this.$route.query.preUrl || 'VehicleManagement', query: $.extend(this.$route.query, { preUrl: this.$route.name }) };
            this.$router.push(backUrl);
            // }
        },
        vehMgt() {
            // if( this.alreadySaved){
            let toVehMgt = { name: 'VehicleManagement', query: $.extend(this.$route.query, { preUrl: this.$route.name }) };
            this.$router.push(toVehMgt);
            // }
        },
    },
    watch: {
        saveData: {
            handler(newVal, oldVal) {
                let regPhone = /^[1][0-9]{10}$/;
                let regNumber = /^[0-9]{6}$/;
                if (regPhone.test(this.saveData.phoneNo) && regNumber.test(this.saveData.authCode) && this.saveData.openid) {
                    this.cansave = true;
                } else {
                    this.cansave = false;
                }
            },
            deep: true
        }
    }
};
</script>
<style scoped>
.bind-phone-background {
    position: absolute;
    top: 20px;
    left: 0px;
    height: 100vh;
    padding: 20px;
    width: 90%;
    text-align:center;
     
}
.bind-phone-field {
    border: 1px solid #b1baba;
    border-radius: 8px;
    margin: 3vh;
    width: 85vw;
}
.bind-phone-title {
     font-size: 43px;
    text-align: center;
    color: #7e8c8d;
    padding: 4vh;
    width: 85vw;
}
.bind-phone-submit {
    /*background: #30AFF7;*/
    text-align: center;
    color: #ffffff;
    font-size: 23px;
    border-radius: 8px;
    margin: 3vh;
    width: 85vw;
}

.bind-phone-errMsg {
    float: left;
    color: red;
    display: inline-block;
    margin: 0 0 2% 3%;
}

.van-button--normal  {
	background: #30AFF7; 
 }
.van-button--disabled {
    color: #000000;
    background-color: #b2b2b2;
    border: 1px solid #e5e5e5;
}
</style>
